<template>
  <!-- <div class="container"> -->
  <TaskChatDialog :model-value="dialogVisible" width="30%" destroy-on-close append-to-body @close="handleClose">
    <template #header>
      <div class="task-title">{{ taskContent.taskTitle }}</div>
    </template>
    <el-descriptions :column="2">
      <el-descriptions-item label="计划日期">{{ taskContent.planEndtime }}</el-descriptions-item>
      <el-descriptions-item label="实际完成日期">{{ taskContent.currentEndTime }}</el-descriptions-item>
      <el-descriptions-item label="预计用时">{{ taskContent.planCostHour }}小时</el-descriptions-item>
      <el-descriptions-item label="实际用时">{{ taskContent.currentCostHour }}小时</el-descriptions-item>
      <!-- <el-descriptions-item label="任务进度">
        <el-progress
          :text-inside="true"
          :stroke-width="15"
          status="success"
          :percentage="taskContent.completePercent" />
      </el-descriptions-item> -->
      <el-descriptions-item label="优先级">
        <span :style="priorityColor(taskContent.taskPriority)" style="padding: 5px 10px">
          {{ dict.translate('task_priority', taskContent.taskPriority) }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="任务类型">
        <span :style="taskTypeColor(taskContent.taskProp)" style="padding: 5px 10px">
          {{ dict.translate('task_type', taskContent.taskProp) }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="任务状态">
        <span :style="`color: ${getStatus(taskContent.currentStatus, 'color')}`">
          {{ getStatus(taskContent.currentStatus, 'text') }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="指派人">
        {{ taskContent.taskUserName }}
      </el-descriptions-item>

      <el-descriptions-item label="描述">
        <RichTextViewer :view-html="taskContent.taskDetail"></RichTextViewer>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="执行人" min-width="90">{{ taskContent.name }}</el-descriptions-item> -->
    </el-descriptions>
  </TaskChatDialog>
  <!-- </div> -->
</template>
<script setup>
import { useDictionary } from '@/use/use-dictionary'
import { formatterColor, priorityColor, taskTypeColor } from '@/utils/task-utils.js'

const dict = useDictionary(['task_priority', 'task_type'])

// 接收父组件传值
const props = defineProps(['dialogVisible', 'detailInfo', 'getStatus'])
const emits = defineEmits(['update:dialogVisible'])

const taskContent = ref({})

watch(
  () => props.detailInfo,
  (newValue) => {
    taskContent.value = newValue.extendedProps
  }
)
/**
 * 弹窗关闭时操作
 */
const handleClose = () => {
  emits('update:dialogVisible', false)
}
</script>
<style lang="scss" scoped>
.task-title {
  vertical-align: middle;
  font-weight: bold;
  font-size: 16px;
  &::before {
    content: '';
    width: 4px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background: var(--elp-color-primary);
    margin-right: 8px;
    border-radius: 10px;
  }
}
:deep(.elp-descriptions__label) {
  font-weight: bold;
}
</style>
